<template>
  <div class="nav-bar-container" :class="{ transparent }">
    <van-nav-bar
      :title="title"
      :left-text="leftText"
      :right-text="rightText"
      :left-arrow="leftArrow"
      :fixed="fixed"
      :placeholder="fixed"
      :border="border"
      :z-index="zIndex"
      :safe-area-inset-top="safeAreaInsetTop"
      @click-left="$emit('click-left')"
    >
      <!-- 左侧插槽 -->
      <template #left v-if="$slots.left">
        <slot name="left"></slot>
      </template>

      <!-- 标题插槽 -->
      <template #title v-if="$slots.title">
        <slot name="title"></slot>
      </template>

      <!-- 右侧插槽 -->
      <template #right v-if="$slots.right">
        <slot name="right"></slot>
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup>
defineProps({
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 左侧文案
  leftText: {
    type: String,
    default: '',
  },
  // 右侧文案
  rightText: {
    type: String,
    default: '',
  },
  // 是否显示左侧箭头
  leftArrow: {
    type: Boolean,
    default: false,
  },
  // 是否固定在顶部
  fixed: {
    type: Boolean,
    default: true,
  },
  // 是否显示下边框
  border: {
    type: Boolean,
    default: false,
  },
  // 导航栏 z-index
  zIndex: {
    type: Number,
    default: 100,
  },
  // 是否开启顶部安全区适配
  safeAreaInsetTop: {
    type: Boolean,
    default: true,
  },
  // 是否透明背景
  transparent: {
    type: Boolean,
    default: false,
  },
})

defineEmits(['click-left'])
</script>

<style scoped>
/* 导航栏容器 */
:deep(.van-nav-bar) {
  background-color: var(--bg-color);
  height: var(--header-height);
}

/* 透明样式 */
.transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.transparent :deep(.van-nav-bar) {
  background-color: transparent;
}

.transparent :deep(.van-nav-bar__title),
.transparent :deep(.van-nav-bar__left),
.transparent :deep(.van-nav-bar__right),
.transparent :deep(.van-icon) {
  color: var(--color-white);
}

/* 标题样式 */
:deep(.van-nav-bar__title) {
  font-size: var(--font-size-lg);
  font-weight: var(--tab-font-weight);
  color: var(--font-color-base);
  max-width: 70%;
}

/* 左侧区域样式 */
:deep(.van-nav-bar__left) {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
}
:deep(.van-icon) {
  font-size: var(--font-size-xl);
  color: var(--font-color-base);
}
/* 右侧区域样式 */
:deep(.van-nav-bar__right) {
  font-size: var(--font-size-base);
  color: var(--font-color-base);
}

/* 占位元素样式 */
:deep(.van-nav-bar__placeholder) {
  height: var(--header-height);
}

/* 中间插槽样式 */
:deep(.van-nav-bar__center) {
  max-width: 60%;
}

:deep(.van-tabs) {
  height: var(--header-height);
  line-height: var(--header-height);
}

:deep(.van-tabs__wrap) {
  height: 100%;
}

:deep(.van-tabs__nav) {
  background: transparent;
}

:deep(.van-tab) {
  color: var(--font-color-gray);
  font-size: var(--font-size-base);
}

:deep(.van-tab--active) {
  color: var(--font-color-base);
  font-weight: var(--tab-font-weight);
}

:deep(.van-tabs__line) {
  background-color: var(--font-color-base);
}
</style>
